<template>
  <div class="user">

    <!--搜索框-->
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="最低价格">
        <el-input v-model="form.minPrice" placeholder="最低价格"></el-input>
      </el-form-item>
      <el-form-item label="最高价格">
        <el-input v-model="form.maxPrice" placeholder="最高价格"></el-input>
      </el-form-item>
      <el-form-item label="房型">
        <el-select v-model="form.type" placeholder="房型">
          <el-option label="大床房" value="0"></el-option>
          <el-option label="标间" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getRoomList">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="goback">返回</el-button>
      </el-form-item>
    </el-form>
    <!--表格-->
    <el-table stripe :data="roomList" border height="600px" style="width: 100%">
      <el-table-column width="60px" type="index"></el-table-column>
      <el-table-column align="center" prop="hotelName" label="酒店名" width="150"></el-table-column>
      <el-table-column align="center" prop="type" label="类型" width="100">
        <template slot-scope="scope">
          {{ scope.row.type ? '标间' : '大床房' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="price" label="价格" width="100"></el-table-column>
      <el-table-column align="center" prop="roomNumber" label="房间号" width="100"></el-table-column>
      <el-table-column align="center" prop="roomStatus" label="状态" width="100">
        <template slot-scope="scope">
          {{ getRoomStatus(scope.row.roomStatus) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="city" label="所在地" width="100"></el-table-column>

      <el-table-column
          align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="详情" placement="left">
            <el-button type="info" icon="el-icon-view" size="mini" @click="toShowDialog(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="购买" placement="right">
            <el-button type="success" icon="el-icon-check" size="mini" @click="toShowDialog(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[10,15,20,30]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total">
    </el-pagination>
    <!--详细描述框-->
    <el-dialog
        :visible.sync="showDialog"
        width="50%"
        @close="showDialog = false"
    >
      <el-descriptions title="详细信息">
        <el-descriptions-item label="房间号">{{ showDescription.roomNumber }}</el-descriptions-item>
        <el-descriptions-item label="房间类型">{{ showDescription.type === '0' ? '大床房' : '标间' }}
        </el-descriptions-item>
        <el-descriptions-item label="价格">{{ showDescription.price }}</el-descriptions-item>
        <el-descriptions-item label="房间状态">{{ getRoomStatus(showDescription.roomStatus) }}</el-descriptions-item>
        <el-descriptions-item label="酒店名">{{ showDescription.hotelName }}</el-descriptions-item>
        <el-descriptions-item label="联系地址">{{ showDescription.address }}</el-descriptions-item>
        <el-descriptions-item label="酒店所在城市">{{ showDescription.city }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ showDescription.phone }}</el-descriptions-item>
      </el-descriptions>
      <el-button type="success" @click="toShowBuyDialog">预定</el-button>
      <el-button type="primary" @click="showDialog=false">返回</el-button>
    </el-dialog>
    <!--支付表单展示-->
    <el-dialog
        :visible.sync="showBuyDialog"
        width="50%"
        @close="showBuyDialog = false"
    >
      <el-form ref="form" :model="buyForm" label-width="80px">
        <el-form-item label="入住时间">
          <template>
            <div class="block">
              <el-date-picker
                  v-model="buyForm.checkInDate"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="退房时间">
          <template>
            <div class="block">
              <el-date-picker
                  v-model="buyForm.checkOutDate"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </div>
          </template>
        </el-form-item>
        <el-button type="success" @click="toBuyRoom(1)">立即支付</el-button>
        <el-button type="success" @click="toBuyRoom(0)">稍后支付</el-button>
        <el-button type="success" @click="closeBuyDialog">取消</el-button>
      </el-form>
    </el-dialog>
    <!--订单展示-->
    <el-dialog
        :visible.sync="showOrderDialog"
        width="50%"
        @close="showOrderDialog = false"
    >
      <el-descriptions title="订单" :column='1'>
        <el-descriptions-item label="订单号">{{ orderData.orderNumber }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{ orderData.orderStatus === 0 ? '未支付' : '已支付' }}</el-descriptions-item>
        <el-descriptions-item label="购买人">{{ orderData.username }}</el-descriptions-item>
        <el-descriptions-item label="房间号">{{ orderData.roomNumber }}</el-descriptions-item>
        <el-descriptions-item label="房间类型">{{ orderData.type === '0' ? '大床房' : '标间' }}
        </el-descriptions-item>
        <el-descriptions-item label="价格">{{ orderData.roomPrice }}</el-descriptions-item>
        <el-descriptions-item label="酒店名">{{ orderData.hotelName }}</el-descriptions-item>
        <el-descriptions-item label="联系地址">{{ orderData.hotelAddress }}</el-descriptions-item>
        <el-descriptions-item label="酒店所在城市">{{ orderData.hotelCity }}</el-descriptions-item>
        <el-descriptions-item label="酒店电话">{{ orderData.hotelPhone }}</el-descriptions-item>
        <el-descriptions-item label="入住日期">{{ orderData.checkInDate }}</el-descriptions-item>
        <el-descriptions-item label="离店日期">{{ orderData.checkOutDate }}</el-descriptions-item>
      </el-descriptions>
<!--      <el-button type="success" @click="toShowBuyDialog">预定</el-button>-->
      <el-button type="primary" @click="showOrderDialog=false">返回</el-button>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: 'RoomDisplay',
  data() {
    return {
      roomList: [],
      showDialog: false,
      showBuyDialog: false,
      showOrderDialog: false,
      showDescription: {},
      form: {
        hotelId: '',
        type: '',
        minPrice: '',
        maxPrice: '',
      },
      buyForm: {
        id: '',//订单id
        roomId: '',//订单房间
        userId: '',//订单用户
        hotelId: '',//酒店id
        checkInDate: '',//入住时间
        checkOutDate: '',//退房时间
        isPay: '',//是否支付  0未支付 1已支付
      },
      orderData: {
        checkInDate: "",
        checkOutDate: "",
        hotelAddress: "",
        hotelCity: "",
        hotelName: "",
        hotelPhone: "",
        orderNumber: "",
        orderStatus: '',
        roomNumber: "",
        roomPrice: '',
        roomType: '',
        username: "",
      },
      //分页数据
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10,
      },
      //总数
      total: 0,
    }
  },
  methods: {
    //获取酒店房间信息
    async getRoomList() {
      const urlBase = '/api/room/search/other';
      //分页参数
      const pageSize = this.queryInfo.pageSize;
      const pageNumber = this.queryInfo.pageNum;
      //条件查询参数
      const hotelId=window.sessionStorage.getItem('hotelId')
      const type=this.form.type
      const minPrice=this.form.minPrice
      const maxPrice=this.form.maxPrice
      //组装参数
      let queryParams = `pageSize=${pageSize}&pageNumber=${pageNumber}`;
      if (hotelId) { queryParams += `&hotelId=${hotelId}`}
      if (type) { queryParams += `&type=${type}`}
      if (minPrice) { queryParams += `&minPrice=${minPrice}`}
      if (maxPrice) { queryParams += `&maxPrice=${maxPrice}`}
      const url = `${urlBase}?${queryParams}`;
      const {data: res} = await axios.get(url)
      if (res.code!==0){
        this.$message.error(res.description||res.message)
        return
      }
      this.roomList = res.data.rows;
      this.total = res.data.total;

    },
    //计算房间状态
    getRoomStatus(status) {
      switch (status) {
        case 0:
          return '空闲';
        case 1:
          return '预定';
        case 2:
          return '已入住';
        case 3:
          return '维修中';
        default:
          return '未知状态';
      }
    },
    //搜索
    //当前页显示条数改变
    handleSizeChange(val) {
      this.queryInfo.pageSize = val
      this.getRoomList()
    },
    //当前页数改变
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      this.getRoomList()
    },
    //重置
    reset() {
      this.form = {}
      this.getRoomList()
    },
    //返回
    goback() {
      this.$router.push('/welcome')
      window.sessionStorage.removeItem('hotelId')
    },
    //展示详细信息
    toShowDialog(row) {
      this.showDialog = true
      this.showDescription = {...row};
      window.sessionStorage.setItem('roomId', row.id)
    },
    toShowBuyDialog() {
      this.showBuyDialog = true
    },
    closeBuyDialog() {
      this.showBuyDialog = false
      this.buyForm = {}
    },
    //购买
    async toBuyRoom(isPay) {
      this.showDialog=false
      const userId = JSON.parse(window.sessionStorage.getItem('user'))
      this.buyForm.userId = userId.id
      this.buyForm.roomId = window.sessionStorage.getItem('roomId')
      this.buyForm.hotelId = window.sessionStorage.getItem('hotelId')
      this.buyForm.isPay = isPay

      if (!this.buyForm.checkOutDate ||
          !this.buyForm.checkInDate ||
          isNaN(this.buyForm.checkOutDate.getTime()) ||
          isNaN(this.buyForm.checkInDate.getTime())  ){
        this.$message.error("未选择日期");
        return
      }

      const {data: res} = await axios.post("/api/order", this.buyForm)
      if (res.code !== 0) {
        this.$message.error(res.description || res.message || "请稍后重试");
        return
      }
      if (isPay === 1)
        this.$message.success("预定成功");
      else this.$message.success("预定成功,请稍后支付");
      const url = `/api/order?id=${res.data}`;
      const {data: info} = await axios.get(url);
      if (info.code !== 0) {
        this.$message.error(info.description || info.message || "请稍后重试");
        return
      }
      this.closeBuyDialog()
      this.orderData={...info.data}
      console.log(this.orderData)
      this.showOrderDialog=true
      window.sessionStorage.removeItem('roomId')
    }
  },
  mounted() {
    this.getRoomList()
  },
  created() {

  }
}
</script>
<style scoped>

</style>